<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../css/elementui.css">
    <style>
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 150px;
            height: 70px;
            line-height: 150px;
            text-align: center;
        }
        .avatar {
            width: 150px;
            height: 70px;
            display: block;
        }

    </style>
</head>
<body>
  <div id="app">
      <!--查询表单-->
      <el-form :inline="true" >
          <el-form-item label="查询电影院">
              <el-input v-model="searchMap.dept" placeholder="查询电影院">
              </el-input>
          </el-form-item>
          <el-form-item label="查询电影">
              <el-input v-model="searchMap.dname" placeholder="查询电影">
              </el-input>
          </el-form-item>
          <el-button type="primary" @click="fetchData()">查询</el-button>
          <el-button type="primary" @click="export1()">导出</el-button>

      </el-form>

      <!--弹出窗口-->
          <el-form label-width="90px">
              <el-form-item label="订单号">
                  {{pojo.orderId}}
              </el-form-item>
              <el-form-item label="电影院">
                  {{pojo.dept}}
              </el-form-item>
              <el-form-item label="时间">
                  {{pojo.worktime}}
              </el-form-item>
              <el-form-item label="电影名称">
                  {{pojo.dname}}
              </el-form-item>
              <el-form-item label="票价">
                  {{pojo.fee}}
              </el-form-item>
              <el-form-item label="观影人">
                  {{pojo.uname}}
              </el-form-item>

          </el-form>


      <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectChange">
          <el-table-column type="selection" width="50">

          </el-table-column>
          <el-table-column
                  prop="id"
                  label="id"
                  width="200">
          </el-table-column>
          <el-table-column
                  prop="dept"
                  label="电影院"
                  width="200">
          </el-table-column>
          <el-table-column
                  prop="dname"
                  label="电影名称"
                  width="200">
          </el-table-column>

          <el-table-column
                  prop="worktime"
                  label="时间">
          </el-table-column>

          <el-table-column
                  prop="lastnum"
                  label="余票">
          </el-table-column>

          <el-table-column label="操作"	>
              <template slot-scope="scope">
                  <el-button v-if="scope.row.lastnum<=0"  :disabled="true" @click="edit(scope.row)" type="text" size="small"> 立即买票</el-button>
                  <el-button v-if="scope.row.lastnum>0"   @click="edit(scope.row)" type="text" size="small"> 立即买票</el-button>
              </template>
          </el-table-column>
      </el-table>

      <el-pagination
              @size-change="fetchData"
              @current-change="fetchData"
              :current-page.sync="currentPage"
              :page-sizes="[2, 4, 6, 8]"
              :page-size="size"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
      </el-pagination>
  </div>
</body>
</html>
<script src="../js/axios.js"></script>
<script src="../js/vue.js"></script>
<script src="../js/elementui.js"></script>
<script>
    // 1. Vue.filter  定义一个全局过滤器
    Vue.filter('format', function(value, arg) {
        function dateFormat(date, format) {
            if (typeof date === "string") {
                var mts = date.match(/(\/Date\((\d+)\)\/)/);
                if (mts && mts.length >= 3) {
                    date = parseInt(mts[2]);
                }
            }
            date = new Date(date);
            if (!date || date.toUTCString() == "Invalid Date") {
                return "";
            }
            var map = {
                "M": date.getMonth() + 1, //月份
                "d": date.getDate(), //日
                "h": date.getHours(), //小时
                "m": date.getMinutes(), //分
                "s": date.getSeconds(), //秒
                "q": Math.floor((date.getMonth() + 3) / 3), //季度
                "S": date.getMilliseconds() //毫秒
            };
            format = format.replace(/([yMdhmsqS])+/g, function(all, t) {
                var v = map[t];
                if (v !== undefined) {
                    if (all.length > 1) {
                        v = '0' + v;
                        v = v.substr(v.length - 2);
                    }
                    return v;
                } else if (t === 'y') {
                    return (date.getFullYear() + '').substr(4 - all.length);
                }
                return all;
            });
            return format;
        }
        return dateFormat(value, arg);
    });
    new Vue({
        el: '#app',
        data() {
            return {
                tableData: [],
                currentPage: 1,
                total: 10,
                size: 2,
                searchMap: {},
                formVisible: false,
                hobby:[],
                pojo: {},
                imageUrl: '',
                multiSelection:[],
            }
        },
        created() {
           // alert("111");
          this.fetchData();
        },
        methods:{
            export1(){
              location.href="/doctor/export";
            },
            handleSelectChange(val){
                this.multiSelection =val;
            },
            fetchData (){
                axios.post(`/doctor/findByPage?page=${this.currentPage}&size=${this.size}`,this.searchMap).then( response=> {
                    this.tableData = response.data.rows;
                    this.total = response.data.total;
                });
            },
            save (){
                //save方法第一句添加
                //this.pojo.image= this.imageUrl;
                this.pojo.hobby = this.hobby.join(",")
                axios.post(`/student/${this.pojo.id==null?'add':'update'}`,this.pojo).then(response =>{
                    this.fetchData (); //刷新列表
                    this.formVisible = false ;//关闭窗口
                });
            },
            edit (row){
                this.formVisible = true // 打开窗口
                this.hobby=[];
                  //调用查询
                axios.post(`order/add`,row).then(response => {
                      if(response.data.code==0){
                          console.log(response.data.message);
                          //alert(this.pojo.orderId);
                          this.pojo = JSON.parse(response.data.message);
                          this.fetchData();
                      }
                })

            },
            dele (id){
                this.$confirm('确定要删除此记录吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then( () => {
                    axios.get(`/student/delete?id=${id}`).then(response => { if(response.data.code==0){
                        //this.fetchData (); //刷新列表
                        location.href="/";
                    }else{
                        this.$alert(response.data.message)
                    }
                    })
                })
            },
            deleByIds (){
                if(this.multiSelection.length==0){
                    alert("请选择一条记录");
                }else{
                    this.$confirm('确定要删除此记录吗?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then( () => {
                        let ids = [];
                        for(let i=0;i<this.multiSelection.length;i++){
                            ids.push(this.multiSelection[i].id);
                        }
                        axios.post(`/student/deleteByIds`,ids).then(response => { if(response.data.code==0){
                            //this.fetchData (); //刷新列表
                            location.href="/";
                        }else{
                            this.$alert(response.data.message)
                        }
                        })
                    })
                }

            },
            handleAvatarSuccess(res, file) {
                this.imageUrl = file.response;
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg'; const isLt2M = file.size / 1024 / 1024 < 2; if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },
        }
    })
</script>